<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aruk - Multipurpose Woocommerce Store</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../font_img/font-home/iconfont.css">
    <link rel="stylesheet" href="../../css/navigation.css">
    <link rel="stylesheet" href="../../css/bottom-map.css">
    <link rel="stylesheet" href="../../css/way.css">
    <link rel="stylesheet" href="../../css/banner1.css">
    <link rel="stylesheet" href="../../css/calculator.css">
</head>

<body>
    <div class="calculator">
        <div class="calculator-nav">
            <div class="navigation">
                <div class="container">
                    <div class="logo">
                        <a href="../../home.html">
                            <img src="../../img/logo/logo.png" alt="">
                        </a>
                    </div>
                    <div class="main-menu">
                        <ul>
                            <li>
                                <a href="../../home.html">HOME
                                    <div></div>
                                </a>


                            </li>
                            <li><a href="./shop.html">SHOP
                                    <div></div>
                                </a></li>
                            <li><a href="./collection.html">COLLECTION
                                    <div></div>
                                </a></li>
                            <li><a href="./aboutUs.html">ABOUT
                                    <div></div>
                                </a></li>
                            <li><a href="./blog.html">BLOG
                                    <div></div>
                                </a></li>
                            <li><a href="./contact.html">CONTACT
                                    <div></div>
                                </a></li>
                        </ul>
                    </div>
                    <div class="span-icon">
                        <div class="display-flex display-right">
                            <a href="./shoppingCart.html">
                                <span class="iconfont icon-tianchongxing-"></span>
                            </a>
                            <a href="#"><span class="iconfont icon-wodedangxuan"></span></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="placement">
                <span class="iconfont icon-weibajiantoushang
        "></span>
            </div>
        </div>
        <div class="calculator-banner">
            <div class="banner1">
                <div class="shop">
                    <div class="shop-title">
                        <div class="title-inner">
                            <h2>CHECKOUT PAGE</h2>
                            <div class="title-a df"> <a href="#">Home</a>
                                <span></span>
                                <a href="#">Checkout</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- calculator Main -->
        <div class="calculator-main df">
            <div class="calculator-left">
                <div class="checkout">
                    <p>Returning customer ? <a href="#">Click here to login</a></p>
                    <p>Have a Coupon ? <a href="#">Click here to enter your code</a></p>
                </div>
                <div class="details">
                    <h6>Billing Details</h6>
                    <form action="#">
                        <div class="country">
                            <label for="">country</label>
                            <div>
                                <select name="sel" id="country">
                                    <option value="China">China</option>
                                    <option value="UK">United Kingdom(UK)</option>
                                    <option value="Bangladesh">Bangladesh</option>
                                    <option value="US">US</option>

                                </select>
                            </div>
                        </div>
                        <div class="df">
                            <div class="first-name w300">
                                <label for="first-name">FIRST NAME</label>
                                <input type="text" id="first-name">
                            </div>
                            <div class="last-name w300">
                                <label for="last-name">LAST NAME</label>
                                <input type="text" id="last-name">
                            </div>
                        </div>
                        <div class="company">
                            <label>COMPANY NAME</label>
                            <input type="text">
                        </div>
                        <div class="address">
                            <label>ADDRESS</label>
                            <input type="text">
                        </div>
                        <div class="city-now">
                            <label>CITY/TOWN</label>
                            <input type="text">
                        </div>
                        <div class="df">
                            <div class="w300 state ">
                                <label for="state ">COUNTRY/STATES</label>
                                <select name="sel" id="state ">
                                    <option value="China">China</option>
                                    <option value="UK">United Kingdom(UK)</option>
                                    <option value="Bangladesh">Bangladesh</option>
                                    <option value="US">US</option>
                                </select>
                            </div>
                            <div class="w300">
                                <label>POSTCODE / ZIP</label>
                                <input type="text">
                            </div>
                        </div>
                        <div class="df">
                            <div class="w300">
                                <label>EMAIL</label>
                                <input type="text">
                            </div>
                            <div class="w300">
                                <label>PHONE</label>
                                <input type="text">
                            </div>
                        </div>
                        <div class="che1">
                            <div class="checkboxMain">
                                <input type="checkbox" id="cheinp">
                                <label for="cheinp">
                                    <span>
                                        <div class="dian active"></div>
                                    </span> CREATE AN ACCOUNT?

                                </label>
                            </div>
                        </div>
                        <div class="account">
                            <label>ACCOUNT PASSWORD</label>
                            <input type="text">
                        </div>
                        <div class="order">
                            <label>ORDER NOTE</label>
                            <textarea cols="30" rows="10"></textarea>
                        </div>
                        <div class="che2">
                            <div class="checkboxMain">
                                <input type="checkbox" id="cheinp2">
                                <label for="cheinp2">
                                    <span>
                                        <div class="dian active"></div>
                                    </span> SHIP TO ANOTHER ADDRESS

                                </label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="calculator-right">
                <h6>Your Order</h6>
                <span>Products</span>
                <ul>
                    <li>Cum sociis natoque <span>$14.00</span></li>
                    <li>Habitant morbi tristique<span>$28.00</span></li>
                    <li>Aenean ultricies<span>$26.00</span></li>
                </ul>
                <p>Sub Total <span>$68.00</span></p>
                <p>Shipping <span>$0.00</span></p>
                <p>Total <span class="color1">$68.00</span></p>
                <div class="manyCheck">
                    <div class="che">
                        <div class="checkboxMain">
                            <input type="checkbox" id="cheinp">
                            <label for="cheinp">
                                <span>
                                    <div class="dian"></div>
                                </span> Direct bank transfer

                            </label>
                            <p>Aenean id ullamcorper libero. Vestibulum imperdiet nibh. Lorem ullamcorper volutpat.
                                Vestibulum lacinia risus. Etiam
                                sagittis</p>
                        </div>
                    </div>
                    <div class="che">
                        <div class="checkboxMain">
                            <input type="checkbox" id="cheinp1">
                            <label for="cheinp1">
                                <span>
                                    <div class="dian active"></div>
                                </span>
                                <span class="iconfont icon-cc-mastercard"></span>
                                <span class="iconfont icon-cc-visa"></span>
                                <span class="iconfont icon-paypal"></span>
                                <span class="iconfont icon-cc-discover"></span>

                            </label>
                        </div>
                    </div>
                    <div class="che">
                        <div class="checkboxMain">
                            <input type="checkbox" id="cheinp2">
                            <label for="cheinp2">
                                <span>
                                    <div class="dian active"></div>
                                </span> Cheque Payment

                            </label>
                        </div>
                    </div>
                </div>
                <button>PLACE ORDER</button>
            </div>
        </div>
        <div class="calculator-bottom">
            <div class="bottom-map">
                <div class="bottom-map-inner width">
                    <div class="top">
                        <div class="foot-widget first">
                            <div class="logo">
                                <a href="../../home.html">
                                    <img src="../../img/logo/logo.png" alt="">
                                </a>
                            </div>
                            <ul>
                                <li>Email: <span>1965892300@qq.com</span></li>
                                <li>Phone: +137 313 19326</li>
                            </ul>
                            <p>
                                Subscribe to our newsleter and stay
                                up to date with latest offers and
                                upcoming trends.
                            </p>
                            <div class="email"> <input type="email" placeholder="Email">
                                <span class="iconfont icon-arrowRight
                "></span>
                            </div>

                        </div>
                        <div class="foot-widget">
                            <h4>About Us</h4>
                            <ul class="allUl">
                                <li><a href="./aboutUs.html">Our Outlets
                                        <div class="xiantiao"></div>
                                    </a></li>
                                <li><a href="./aboutUs.html">Sales and Retails <div class="xiantiao"></div></a></li>
                                <li><a href="./aboutUs.html">Areas we serve <div class="xiantiao"></div></a></li>
                                <li><a href="./aboutUs.html">Career at aruk <div class="xiantiao"></div></a></li>
                                <li><a href="./contact.html">Contact Us <div class="xiantiao"></div></a></li>
                            </ul>
                        </div>
                        <div class="foot-widget">
                            <h4>Help and Support</h4>
                            <ul class="allUl">
                                <li><a href="./aboutUs.html">Track my order
                                        <div class="xiantiao"></div>
                                    </a></li>
                                <li><a href="./aboutUs.html">Our top products
                                        <div class="xiantiao"></div>
                                    </a></li>
                                <li><a href="./shoppingCart.html">My cart
                                        <div class="xiantiao"></div>
                                    </a></li>
                                <li><a href="./aboutUs.html">Sign in
                                        <div class="xiantiao"></div>
                                    </a></li>
                                <li><a href="./shippingCalculator.html">Shipping Calculator
                                        <div class="xiantiao"></div>
                                    </a></li>
                            </ul>
                        </div>
                        <div class="foot-widget last">
                            <h4>Pages & Resources</h4>
                            <ul class="allUl">
                                <li><a href="./aboutUs.html">About Us
                                        <div class="xiantiao"></div>

                                    </a></li>
                                <li><a href="./collection.html">Shop Page
                                        <div class="xiantiao"></div>

                                    </a></li>
                                <li><a href="./collection.html">Category page
                                        <div class="xiantiao"></div>

                                    </a></li>
                                <li><a href="./aboutUs.html">Sign in page
                                        <div class="xiantiao"></div>

                                    </a></li>
                                <li><a href="./404.html">404 page
                                        <div class="xiantiao"></div>

                                    </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bottom-out">
                    <div class="bottom">
                        <div class="copyright">
                            <p>Copyright © 2020 | Designed by <span>Wpsmasher</span></p>
                        </div>
                        <div class="social-icon">
                            <ul>
                                <li><a href="#"><span class="iconfont icon-facebook"></span></a></li>
                                <li><a href="#"><span class="iconfont icon-twitter"></span></a></li>
                                <li><a href="#"><span class="iconfont icon-instagram"></span></a></li>
                                <li><a href="#"><span class="iconfont icon-v"></span></a></li>
                            </ul>
                        </div>
                        <div class="policy">
                            <p class="first">Terms of Use</p>
                            <p>Privacy Policy</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/navigation.js"></script>
    <script src="../../js/bottom-map.js"></script>
    <script src="../../js/way.js"></script>
    <script src="../../js/calculator.js"></script>

</body>

</html>